<template>
  <div>
    <MyDog
      v-for="(item, index) in arr"
      :key="index"
      :url="item.dogImgUrl"
      :name="item.dogName"
      @like="loveDog.push($event)"
    ></MyDog>
    <p>你喜欢的狗如下</p>
    <ul>
      <li v-for="(item, index) in loveDog" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import MyDog from "./components/01-dog.vue";
export default {
  name: "App",
  components: {
    MyDog,
  },
  props: {},
  data() {
    return {
      arr: [
        {
          dogImgUrl: "./imgs/bo-mei.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl: "./imgs/tai-di.jpg",
          dogName: "泰迪",
        },
        {
          dogImgUrl: "./imgs/jin-mao.jpg",
          dogName: "金毛",
        },
        {
          dogImgUrl: "./imgs/ha-shiqi.jpg",
          dogName: "哈士奇",
        },
        {
          dogImgUrl: "./imgs/ala-sijia.jpg",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl: "./imgs/sa-moye.jpg",
          dogName: "萨摩耶",
        },
      ],
      loveDog: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {},
};
</script>

<style scoped></style>
